{% extends 'base.html' %}
{% load static %}
{% block title %}工资条管理 - 发送基础信息设置{% endblock %}
{% block content %}
<!-- 内容标题栏 -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">薪资模块</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">首页</a></li>
                    <li class="breadcrumb-item active">薪资模块</li>
                    <li class="breadcrumb-item active">
                        <a href="">基础信息</a>
                    </li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- /内容标题栏 -->
<section class="content">
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div class="card card-primary h-100 card-outline">
                <div class="card-header">
                    <h3 class="card-title">工资表基础信息</h3>
                </div>
                <form id="put" class="form" enctype="multipart/form-data" action="" method="post">
                    {% csrf_token %}
                <div class="card-body">
                    {% for info in data %}
                    基础信息
                    <div class="border border-danger"></div>
                         <div class="form-group row mt-3">
                             <label class="col-sm-2 col-form-label" style="color: red;text-align: right;" >姓名所在列：</label>
                             <div class="col-sm-2">
                                 <input type="text" class="form-control" value="{{ info.name_colom }}" name="name_colom">
                             </div>
                            <label class="col-sm-2 col-form-label" style="color: red;text-align: right;" >电话所在列：</label>
                             <div class="col-sm-2">
                                 <input type="text" class="form-control" value="{{ info.phone_colom }}" name="phone_colom">
                             </div>
                            <label class="col-sm-2 col-form-label" style="color: red;text-align: right;" >实发工资列：</label>
                             <div class="col-sm-2">
                                 <input type="text" class="form-control" value="{{ info.total_money_colom }}" name="total_money_colom">
                             </div>
                         </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label" style="color: red;text-align: right;">表头开始行：</label>
                             <div class="col-sm-2">
                                 <input type="text" class="form-control" value="{{ info.title_start }}" name="title_start">
                             </div>
                             <label class="col-sm-2 col-form-label" style="color: red;text-align: right;">表头结束行：</label>
                             <div class="col-sm-2">
                                 <input type="text" class="form-control" value="{{ info.title_end }}" name="title_end">
                             </div>
                        </div>

                    联系方式
                    <div class="border border-primary"></div>
                    <div class="form-group row mt-4" >
                         <label class="col-sm-3 col-form-label" style="color: red;text-align: right;" >邮件联系人：</label>
                         <div class="col-sm-9">
                             <input type="text" class="form-control" value={{ info.contact }} name="contact">
                         </div>
                    </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label" style="color: red;text-align: right;" >微信/钉钉联系人：</label>
                             <div class="col-sm-9">
                                 <input type="text" class="form-control" value={{ info.wechat_admin }} name="wechat_admin">
                             </div>
                        </div>
                        <div class="form-group row" >
                            <label class="col-sm-3 col-form-label" style="color: red;text-align: right;" >公司名称：</label>
                             <div class="col-sm-9">
                                 <input type="text" class="form-control" value={{ info.company_name }} name="company_name">
                             </div>
                        </div>
                    {% endfor %}
                    <div class="form-group">
                        <input type="submit" class="btn btn-success" value="保存">
                    </div>
                </div>
                </form>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card card-gray h-100 card-outline">
                <div class="card-header">
                    <h3 class="card-title">使用说明</h3>
                </div>
                <div class="card-body">
                    <p>
                        <strong>
                            <span style="color:#007bff;">【姓名列】：</span>
                        </strong>
                        <u>是指工资表中存储姓名的那一列，从左数第几列。</u>
                    </p>
                    <p>
                        <strong>
                            <span style="color:#007bff;">【电话所在列】：</span>
                        </strong>
                        <u>是指工资表中存储手机号码的那一列从左数第几列。</u>
                        <strong style="color: red">微信，钉钉工资条需要此数据。</strong>
                    </p>
                    <p>
                        <strong>
                            <span style="color:#007bff;">【实发工资列】：</span>
                        </strong>
                        <u>是指工资表中存储实发工资的那一列，从左数第几列。</u>
                        <strong style="color: red">微信，钉钉工资条需要此数据。</strong>
                    </p>
                    <p>
                        <strong>
                            <span style="color:#007bff;">【邮件地址】：</span>
                        </strong>
                        <u>系统默认工资表最后一列数据是用户的邮箱。</u>
                    </p>

                    <p>
                        <strong>
                            <span style="color:#007bff;">【表头】开始行：</span>
                        </strong>
                        <u>指工资表的表头开始行</u>
                        &nbsp;&nbsp;  &nbsp;&nbsp;<span style="color: green">注：表头最多支持2行，若超过2行，请缩减。</span>
                    </p>
                    <p>
                        <strong>
                            <span style="color:#007bff;">【表头】结束行：</span>
                        </strong>
                        <u>指工资表的表头结束行</u>
                        &nbsp;&nbsp;  &nbsp;&nbsp;<span style="color: green">注：如果表头只有一行，表头开始行和结束行请填写同一个行号。</span>
                    </p>
                    <p>
                        <strong>
                            <span style="color:#007bff;">【联系人】：</span>
                        </strong>
                        <u>指加在邮件正文中，若对工资条有疑问的同事，可以联系的人，一般为薪酬专员</u>
                    </p>
                    <p>
                        <strong>
                            <span style="color:#007bff;">【忽略的方式】：</span>
                        </strong>
                        <u>最后一列数据是NO，则此行数据将被忽略。</u>
                    </p>
                    <p>
                        <strong>
                            <span style="color:#007bff;">【标题隐藏】：</span>
                        </strong>
                        <u>在需要隐藏的标题末尾增加*号，则此列数据将被忽略，不会在工资条信息中展示，邮件工资条除外。</u>
                    </p>
                    <p>
                        <strong>
                            <span style="color:#007bff;">【处理模式】：</span><br><br>
                        </strong>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span style="color:green">*先审后发*</span>
                        --> 提交后会生成预览表格，确认后点击右下角确认按钮才会发送。
                    </p>
                </div>
                <div class="card-footer" style="background-color: white;">
                    <p>
                        <strong>
                            <span style="color:#CCCCCC;">工资表模板：</span>
                        </strong><a href="/static/export_template/payroll/工资表-模板.xlsx" target="_blank">默认模板</a>
                    </p>
                    <p>
                        <strong>
                            <span style="color:red;">【提醒】：</span>
                        </strong>
                        由于工资的敏感性，上传的工资表在操作完成后会自动删除，请在本地做好相关备份！
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
</section>
{% block custom_js %}
    <script>
// 提交，FORM  ID
$("#put").submit(function () {
    var options = {
        success: showRespone,  //ajaxForm提交成功后，执行函数
        resetForm: false,      //执行完毕后是否重设表单
        datetype: 'json',      //数据类型
    }
    $("#put").ajaxSubmit(options);
    return false;
})

function showRespone(data) {
    if(data.status === 1){
        //操作成功
        layui.use('layer',function () {
            var layer=layui.layer;
            info = data.info
            layer.alert(info,{
                icon: 6,
                btn: '确定',
                skin: 'layer-ext-moon',
                yes: function () {
                    window.location.reload()
                },

            })
        })
    }else {
        //操作失败
        layui.use('layer',function () {
            var layer=layui.layer;
            info = data.info
            layer.alert(info,{
                icon: 5,
                skin: 'layer-ext-moon',
            })
        })
    }
}
</script>
{% endblock %}
{% endblock %}
